"use strict"

const container = document.querySelector('.container')
const dropdown = document.querySelector('.dropdown')
const select = document.querySelector('.select')
const selected = document.querySelector('.selected')
const menu = document.querySelector('.menu')
const option = document.querySelectorAll('.option')

document.addEventListener('click', (e) => {
  const target = e.target

  if (target.matches('.select') || target.parentElement === select) {
    menu.classList.toggle('display')
    setTimeout(() => {
      menu.classList.toggle('show')
    }, 1)
  }

  if (target.matches('.option')) {
    selected.innerText = target.innerText
    option.forEach(opt => opt.classList.remove('active'))
    target.classList.add('active')
    menu.classList.remove('display', 'show')
  }

  if (target.matches('.sort .icon') || target.matches('.sort label')) {
    const isChecked = container.querySelector('input').checked
    const popup = container.querySelector('.sort p')

    const anime = [
      { opacity: "1" },
      { opacity: "1" },
      { opacity: "1" },
      { opacity: "0" },
    ];
    
    const timing = {
      duration: 800,
      delay: 150,
      iterations: 1,
    };

    if (isChecked) {
      popup.innerText = 'ascending order'
      popup.animate(anime, timing)

    } else {
      popup.innerText = 'descending order'
      popup.animate(anime, timing)
    }

  }

  if (target.closest('.container') !== container) {
   menu.classList.remove('display', 'show')
  }
})


const container1 = document.querySelector('.container1')
const dropdown1 = document.querySelector('.dropdown1')
const select1 = document.querySelector('.select1')
const selected1 = document.querySelector('.selected1')
const menu1 = document.querySelector('.menu1')
const option1 = document.querySelectorAll('.option1')

document.addEventListener('click', (e) => {
  const target1 = e.target

  if (target1.matches('.select1') || target1.parentElement === select) {
    menu1.classList.toggle('display1')
    setTimeout(() => {
      menu1.classList.toggle('show1')
    }, 1)
  }

  if (target1.matches('.option1')) {
    selected1.innerText = target1.innerText
    option1.forEach(opt => opt.classList.remove('active1'))
    target1.classList.add('active1')
    menu1.classList.remove('display1', 'show1')
  }

  if (target1.matches('.sort1 .icon1') || target1.matches('.sort1 label')) {
    const isChecked1 = container1.querySelector('input').checked
    const popup1 = container1.querySelector('.sort1 p')

    const anime1 = [
      { opacity: "1" },
      { opacity: "1" },
      { opacity: "1" },
      { opacity: "0" },
    ];
    
    const timing1 = {
      duration: 800,
      delay: 150,
      iterations: 1,
    };

    if (isChecked1) {
      popup1.innerText = 'ascending order'
      popup1.animate(anime1, timing1)

    } else {
      popup1.innerText = 'descending order'
      popup1.animate(anime1, timing1)
    }

  }

  if (target1.closest('.container1') !== container1) {
   menu1.classList.remove('display1', 'show1')
  }


  
})